<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>35 - 简约开关 (HTML+CSS)</title>

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <!-- 开关整体父盒子 -->
  <label class="switch-box">
    <!-- checkbox 模拟开和关的状态，同时也是中间的轨道 -->
    <input type="checkbox">
    <!-- 开关左右滑动的圆，分别做内外两层 -->
    <div class="circle"></div>
  </label>

  <label class="switch-box">
    <input type="checkbox" checked>
    <div class="circle"></div>
  </label>

</body>

</html>